<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>世界地图</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;
        }

        body {
            background: url(./img/bg.png) center no-repeat;
            background-size: 100% 100%;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div id="mainBox" style="width: 100%;height: 100%;"></div>
</body>
<script src="./js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="./utils/world.json"></script>
<script type="text/javascript" src="./utils/country-name-zh.json"></script>
<script>
    var myChart = echarts.init(document.getElementById('mainBox'));
    var imgPath = 'image://img/sympol.png';
    var asia = [
        {
            name: "美国",
            value: [-73.97622, 40.757498],
            egName: 'America',
            area: '9370000 km²',
            capital: '华盛顿哥伦比亚特区'
        },
        {
            name: "加拿大",
            value: [-109.404347, 60.638178],
            egName: 'Canada',
            area: '9980000 km²',
            capital: '渥太华'
        },
        {
            name: "澳大利亚",
            value: [137.708144, -25.328065],
            egName: 'Australia',
            area: '7692000 km²',
            capital: '堪培拉'
        },
        {
            name: "中国",
            value: [116.512885, 39.847469],
            egName: 'China',
            area: '9634057 km²',
            capital: '华盛顿哥伦比亚特区'
        },
    ];
    echarts.registerMap('world', worldJson);
    var option = {
        tooltip: {
            trigger: 'item',
            showContent: true,//是否显示提示框浮层，默认显示
            alwaysShowContent: false,//是否永远显示提示框内容，默认情况下在移出可触发提示框区域后 一定时间 后隐藏，设置为 true 可以保证一直显示提示框内容
            hideDelay: 0,//鼠标移出坐标点时，浮层隐藏的延迟时间，单位为 ms，在 alwaysShowContent 为 true 的时候无效
            formatter: function (params, ticket, callback) {
                console.log(params)
                return ''
            }
        },
        geo: {
            map: 'world', //引入地图数据
            roam: true, //开启缩放和平移
            show: true,//是否显示地理坐标系组件
            zoom: 1, //视角缩放比例
            nameMap: nameMapZh,
            label: {
                show: false,//是否显示标签。
            },
            itemStyle: {
                areaColor: '#5470c6',//地图区域的颜色。
                borderColor: '#0a53e9', //线
                shadowColor: '#092f8f', //外发光
                shadowBlur: 20
            },
            emphasis: { //高亮状态下的显示设置
                itemStyle: {
                    areaColor: "#0a2dae", //鼠标选择区域颜色
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    shadowBlur: 20,
                    borderWidth: 0,
                    shadowColor: "rgba(0, 0, 0, 0.5)",
                }
            }
        },
        // 鼠标悬浮提示框
        series: [
            {
                name: "国家",
                type: "map",
                selectedMode: false,//关闭点击地图时显示黄色
                geoIndex: 0,
            },
            {
                name: "Icon",
                type: 'scatter',
                coordinateSystem: 'geo',
                animation: false,//坐标点是否显示动画
                symbol: imgPath,//标记的图形。
                symbolSize: [32, 41],//标记的大小
                symbolOffset: [0, -15],//标记相对于原本位置的偏移
                label: {
                    formatter: '{b}',
                    position: 'right',
                    show: true,//是否显示地名
                    color: '#fff',
                },
                z: 9,
                data: asia.length > 0 ? asia : [],
                tooltip: {//仅在 options中最外层的 tooltip.trigger 为 'item'时有效
                    position: 'bottom',//提示框位置
                    backgroundColor: "rgba(185,197,218,0.8)", //设置背景图片 rgba格式
                    borderColor: '#9a9c9d',
                    textStyle: {
                        color: '#fff'
                    },
                    formatter: function (params, ticket, callback) {
                        var _dt = params.data;
                        if (params.data) {
                            var strHtml = '<div>';
                            strHtml += '<table class="table">';
                            strHtml += '<tr><td colspan="2" style="text-align:center">国家简介</td></tr>';
                            strHtml += '<tr><td>中文名称：</td><td>' + _dt.name + '</td></tr>';
                            strHtml += '<tr><td>英文名称：</td><td>' + _dt.egName + '</td></tr>';
                            strHtml += '<tr><td>首都：</td><td>' + _dt.capital + '</td></tr>';
                            strHtml += '<tr><td>国土面积：</td><td>' + _dt.area + '</td></tr>';
                            strHtml += '</table>';
                            strHtml += '</div>'
                            return strHtml;
                        }
                    }
                }
            }
        ],
    }
    myChart.setOption(option);
    myChart.off('click') //图表渲染前销毁点击事件
    myChart.on("click", function (params) {
        if (params.data) {
            alert('我点击的是：' + params.data.name)
        }
    })
</script>

</html>